<template>
  <el-container>
    <p>时间{{ form.times }}</p>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-form-item>
        <el-button type="primary">登录</el-button>
        <el-button>注册</el-button>
      </el-form-item>
      <el-main>
        <el-form
          ref="resetFormData"
          :model="form"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="菜单" prop="region">
            <el-select v-model="form.region" placeholder="请选择" clearable>
              <el-option label="服务器" value="服务器"></el-option>
              <el-option label="任务书" value="任务书"></el-option>
              <el-option label="IP" value="IP"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期" prop="date1">
            <el-col :span="11">
              <el-date-picker
                v-model="form.date1"
                type="date1"
                placeholder="年-月-日"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-time-picker
                v-model="form.date2"
                placeholder="时-分-秒"
                style="width: 100%"
              ></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input
              type="mobile"
              ref="mobile"
              v-model="form.mobile"
            ></el-input>
          </el-form-item>
          <el-form-item label="短信内容" prop="desc">
            <el-input v-model="form.desc" type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>
<script>
import { ref, onBeforeMount } from 'vue'
import { validMobile } from '../utils/validate'
export default {
  setup () {
    const form = ref({
      mobile: '',//手机号
      region: '',//分类菜单  服务器、任务书
      date1: '',//日期
      date2: '',//时间
      desc: '',//短信内容
      times: '' //当前时间
    })
    // 表单验证
    // 手机格式
    const validateMobile = (rule, value, callback) => {
      if (!validMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    const rules = ref({
      mobile: [{ required: true, trigger: 'blur', validator: validateMobile }],
      region: [{
        required: true, message: '请选择分类', trigger: 'change'
      }],
      date1: [
        {
          type: 'date',
          required: true,
          message: '请选择日期',
          trigger: 'change',
        },
      ],
      date2: [
        {
          type: 'date',
          required: true,
          message: '请选择时间',
          trigger: 'change',
        },
      ],
      desc: [
        {
          required: true,
          trigger: 'blur',
        },
      ]
    })

    const resetFormData = ref(null)
    // 取消，重置表单
    const resetForm = () => {
      resetFormData.value.resetFields()
    }
    // 挂载之前
    onBeforeMount(() => {
      console.log('获取的值', form.value)
      form.value.desc = '您所使用的' + `${form.value.region}` + '于今日即将到期，请您及时充值，避免给您造成影响。'
    })
    const times = ref(null)
    // 提交表单//发送短信
    const onSubmit = () => {
      console.log('submit!')
      if (temp === '0') {
        times.value = setTimeout(() => {
          // 发送短信
        }, 1000)
      }
    }
    // 获取当前时间
    const time = () => {
      // clearTimeout(times.value)
      var dt = new Date() //当前时间
      var date_next = new Date(2022, 1, 1) //创建一个新的date作为参数
      var temp = (date_next - dt) / 1000//相减算出当前时间和那天相差的毫秒数
      var d = parseInt(temp / 60 / 60 / 24) //计算天数
      var h = parseInt(temp / 60 / 60 % 24) //计算小时
      var m = parseInt(temp / 60 % 60) //计算分数
      var s = parseInt(temp % 60)
      form.value.times = d + "天" + h + "小时" + m + "分" + s + "秒"
      // document.getElementById("timeshow").innerHTML = `现在的时间为：${y}年${mm}月${d}日`
    }
    setInterval(time, 1000)
    return { time, times, form, onSubmit, resetFormData, resetForm, rules, validateMobile }
  },
}
</script>

<style lang="scss" scoped>
</style>